<div style="POSITION: relative" id="content">
  <h3> 使用easyUI展开行详细编辑form创建CRUD应用 </h3>
  <div id="article_content" class="article_content">
    <p>当切换datagrid的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px">view 到 'detailview',用户可以展开一行显示一些行的详细在行下面,这个功能允许你提供一些合适的<span style="text-align:left">layout 到里面,编辑form将放置到详细行panel中,在这个教程中,我们使用datagrid 组件通过编辑form减小占据空间.</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px"><span style="text-align:left"><img src="documentation/images/1344393500_3123.png" alt=""><br>
      </span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤1:使用HTML标记创建 DataGrid</h4>
    <pre name="code" class="html">&lt;table id=&quot;dg&quot; title=&quot;My Users&quot; style=&quot;width:550px;height:250px&quot; url=&quot;get_users.php&quot; toolbar=&quot;#toolbar&quot; fitcolumns=&quot;true&quot; singleselect=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;firstname&quot; width=&quot;50&quot;&gt;First Name&lt;/th&gt;  
            &lt;th field=&quot;lastname&quot; width=&quot;50&quot;&gt;Last Name&lt;/th&gt;  
            &lt;th field=&quot;phone&quot; width=&quot;50&quot;&gt;Phone&lt;/th&gt;  
            &lt;th field=&quot;email&quot; width=&quot;50&quot;&gt;Email&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  
&lt;div id=&quot;toolbar&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconcls=&quot;icon-add&quot; plain=&quot;true&quot; onclick=&quot;newItem()&quot;&gt;New&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconcls=&quot;icon-remove&quot; plain=&quot;true&quot; onclick=&quot;destroyItem()&quot;&gt;Destroy&lt;/a&gt;  
&lt;/div&gt;  </pre>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px"><span style="text-align:left"></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> Step 2: 应用detailview到datagrid</h4>
    <pre name="code" class="javascript">$('#dg').datagrid({  
    view: detailview,  
    detailFormatter:function(index,row){  
        return '&lt;div class=&quot;ddv&quot;&gt;&lt;/div&gt;';  
    },  
    onExpandRow: function(index,row){  
        var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');  
        ddv.panel({  
            border:false,  
            cache:true,  
            href:'show_form.php?index='+index,  
            onLoad:function(){  
                $('#dg').datagrid('fixDetailRowHeight',index);  
                $('#dg').datagrid('selectRow',index);  
                $('#dg').datagrid('getRowDetail',index).find('form').form('load',row);  
            }  
        });  
        $('#dg').datagrid('fixDetailRowHeight',index);  
    }  
});  </pre>
    使用detailview<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">到<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid,在html头部引入'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid-detailview.js</span>'文件</span></span><br>
    我们使用使用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">detailFormatter</span>'函数去生成行详细内容,在这种情况下,我们返回一个空的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&lt;div&gt;,可编辑form将放置到里面,当用户点击行展开按钮<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">('&#43;')</span></span>
    <p></p>
    <p>'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onExpandRow</span>'事件将被触发,我们将通过ajax加载编辑form,调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">getRowDetail</span>'方法去得到行详细容器,所以我们能查找到行详细panel,创建一个</p>
    <p>panel在行详细中,从<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">'show_form.php'加载编辑<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">form 和返回.</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤3: 创建编辑Form</h4>
    编辑form从服务器加载.
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">show_form.php</span><br>
      </span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span>
    <pre name="code" class="html">&lt;form method=&quot;post&quot;&gt;  
    &lt;table class=&quot;dv-table&quot; style=&quot;width:100%;background:#fafafa;padding:5px;margin-top:5px;&quot;&gt;  
        &lt;tbody&gt;&lt;tr&gt;  
            &lt;td&gt;First Name&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;firstname&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot;&gt;&lt;/td&gt;  
            &lt;td&gt;Last Name&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;lastname&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot;&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;td&gt;Phone&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;phone&quot;&gt;&lt;/td&gt;  
            &lt;td&gt;Email&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;email&quot; class=&quot;easyui-validatebox&quot; validtype=&quot;email&quot;&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
    &lt;/tbody&gt;&lt;/table&gt;  
    &lt;div style=&quot;padding:5px 0;text-align:right;padding-right:30px&quot;&gt;  
        &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconcls=&quot;icon-save&quot; plain=&quot;true&quot; onclick=&quot;saveItem(&lt;?php echo $_REQUEST['index'];?&gt;)&quot;&gt;Save&lt;/a&gt;  
        &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconcls=&quot;icon-cancel&quot; plain=&quot;true&quot; onclick=&quot;cancelItem(&lt;?php echo $_REQUEST['index'];?&gt;)&quot;&gt;Cancel&lt;/a&gt;  
    &lt;/div&gt;  
&lt;/form&gt;  </pre>
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 4: 保存和取消编辑</h4>
    调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">saveItem</span>'函数去保存一个用户或者调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">cancelItem</span>'函数取消编辑
    <p></p>
    <pre name="code" class="javascript">function saveItem(index){  
    var row = $('#dg').datagrid('getRows')[index];  
    var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id;  
    $('#dg').datagrid('getRowDetail',index).find('form').form('submit',{  
        url: url,  
        onSubmit: function(){  
            return $(this).form('validate');  
        },  
        success: function(data){  
            data = eval('('+data+')');  
            data.isNewRecord = false;  
            $('#dg').datagrid('collapseRow',index);  
            $('#dg').datagrid('updateRow',{  
                index: index,  
                row: data  
            });  
        }  
    });  
} </pre>
    决定那一个url提交然后查找form对象和调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">submit</span>'方法提交form数据,当保存数据成功折叠和更新行数据.
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span>
    <pre name="code" class="javascript">function cancelItem(index){  
    var row = $('#dg').datagrid('getRows')[index];  
    if (row.isNewRecord){  
        $('#dg').datagrid('deleteRow',index);  
    } else {  
        $('#dg').datagrid('collapseRow',index);  
    }  
} </pre>
    当取消编辑动作,如果是新行而且还没有保存,直接删除行,其他折叠行.
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI示例:</h4>
    <a href="http://www.jeasyui.com/tutorial/app/crud3/downloads/easyui-crud-demo.zip" target="_blank">easyui-crud-demo.zip</a><br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>